<template>
	<view>
		<view class="box1">
			<view>业务类型</view>
			<view>汽车消费贷款</view>
		</view>
		<view class="box2">
			<view class="fot1">请拍摄客户的证件照片</view>
			<view class="box3"><image class="xing" src="../../static/59.png" mode=""></image>请上传征信授权查询</view>
			<view class="box4">
				<view>
					<image src="../../static/55.png" mode=""></image>
					<view>身份证正面</view>
				</view>
				<view>
					<image src="../../static/56.png" mode=""></image>
					<view>身份证反面</view>
				</view>
				<view>
					<image src="../../static/57.png" mode=""></image>
					<view>征信面签照</view>
				</view>
				<view>
					<image src="../../static/58.png" mode=""></image>
					<view>征信授权书</view>
				</view>
			</view>
		</view>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		<view class="line"></view>
		<view class="box2">
			<view class="fot1">承租人信息</view>
			<view class="box2_1">
				<view class="box2_head">身份证号</view>
				<view class="box2_2">
					<input type="text" value="" placeholder="请输入"/>
					<image class="zxj" src="../../static/54.png" mode=""></image>
				</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">姓名</view>
				<view class="box2_2"><input type="text" value="" placeholder="请输入"/></view>
			</view>
			<view class="box2_1">
				<view class="box2_head">手机号码</view>
				<view class="box2_2"><input type="text" value="" placeholder="请输入"/></view>
			</view>
			<view class="box2_1">
				<view class="box2_head">婚姻状况</view>
				<view class="box2_2"><input type="text" value="" placeholder="请输入"/></view>
			</view>
			<view class="box2_1">
				<view class="box2_head">是否有担保人</view>
				<view class="box2_2">
					<view :class="ind1==index?'active box2_3':'box2_3'" v-for="(item,index) in arr1" @click="xz(index,1)">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="box2">
			<view class="fot1">配偶信息</view>
			<view class="box2_1">
				<view class="box2_head">身份证号</view>
				<view class="box2_2">
					<input type="text" value="" placeholder="请输入"/>
					<image class="zxj" src="../../static/54.png" mode=""></image>
				</view>
			</view>
			<view class="box2_1">
				<view class="box2_head">姓名</view>
				<view class="box2_2"><input type="text" value="" placeholder="请输入"/></view>
			</view>
			<view class="box2_1">
				<view class="box2_head">手机号码</view>
				<view class="box2_2"><input type="text" value="" placeholder="请输入"/></view>
			</view>
		</view>
		<view class="box2">
			<view class="fot1">征信授权查询</view>
			<view class="box3"><image class="xing" src="../../static/59.png" mode=""></image>请上传征信授权查询</view>
			<view class="box4">
				<view>
					<image src="../../static/55.png" mode=""></image>
					<view>身份证正面</view>
				</view>
				<view>
					<image src="../../static/56.png" mode=""></image>
					<view>身份证反面</view>
				</view>
				<view>
					<image src="../../static/57.png" mode=""></image>
					<view>征信面签照</view>
				</view>
				<view>
					<image src="../../static/58.png" mode=""></image>
					<view>征信授权书</view>
				</view>
			</view>
			<view class="all_btn">下一步</view>
		</view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				arr:['按揭','直租','回租','车抵'],
				arr1:['是','否'],
				ind:0,
				ind1:0
			}
		},
		methods: {
			xz:function(index,type){
				if(type == 0){
					this.ind = index
				}else if(type == 1){
					this.ind1 = index
				}
			}
		}
	}
</script>

<style>
	
	
	.box4>view>image{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: -1;
	}
	.box4>view{
		width: 316rpx;
		height: 211rpx;
		font-size:22rpx;
		font-family:Microsoft YaHei;
		font-weight:400;
		color:#666666;
		margin-bottom: 60rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		z-index: 10;
	}
	.box4{
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
	}
	.xing{
		width: 12rpx;
		height: 14rpx;
		margin-right: 15rpx;
	}
	.box3{
		font-size:22rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(102,102,102,1);
		margin: 30rpx 0 40rpx 0;
	}
	.box2_3{
		width:64rpx;
		height:54rpx;
		border:1px solid rgba(153,153,153,1);
		border-radius:10rpx;
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 20rpx;
	}
	.box2_2>input{
		text-align: right;
	}
	.box2_2{
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.zxj{
		width: 37rpx;
		height: 32rpx;
		margin-left: 20rpx;
	}
	.box2_head{
		white-space: nowrap;
	}
	.box2_1{
		height: 88rpx;
		border-bottom: 1px solid #EEEDF2;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.fot1{
		font-size:30rpx;
		font-family:PingFang SC;
		font-weight:bold;
		color:rgba(51,51,51,1);
	}
	.box2{
		padding: 30rpx;
		box-sizing: border-box;
	}
	.line{
		height:20rpx;
		background:rgba(238,237,242,1);
	}
	.active{
		background:rgba(58,98,255,0.1);
		border:1rpx solid #3A62FF !important;
		border-radius:10rpx;
		color: #3A62FF !important;
	}
	.box1_r>view{
		width:86rpx;
		height:44rpx;
		border:1rpx solid rgba(153,153,153,1);
		border-radius:10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-left: 10rpx;
		font-size:26rpx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
	}
	.box1_r{
		display: flex;
		justify-content:flex-start;
		align-items: center;
	}
	.box1{
		height: 100rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
</style>
